<template>
  <div class="navbar">
      <h2>尊敬的{{ this.mobile }}，欢迎使用本系统！</h2>
      <div class="navbar-menu">
        <el-menu mode="horizontal"
        background-color="#f1af34"
        text-color="#fff"
        active-text-color="#fff">
          <router-link :to="{path:'/member/build',query:{name:this.mobile}}"><el-menu-item index="1">房屋</el-menu-item></router-link>

          <router-link :to="{path:'/member/park',query:{name:this.mobile}}"><el-menu-item index="2">车位</el-menu-item></router-link>

          <router-link :to="{path:'/member/charge',query:{name:this.mobile}}"><el-menu-item index="3">缴费</el-menu-item></router-link>

          <router-link :to="{path:'/member/temporarypark',query:{name:this.mobile}}"><el-menu-item index="4">临时停车</el-menu-item></router-link>
          <router-link :to="{path:'/member/complaint',query:{name:this.mobile}}"><el-menu-item index="5">投诉</el-menu-item></router-link>

        </el-menu>
        </div>
        <div class="container-table">
            <el-table
                :data="proCharge"
                style="width: 100%">
                <el-table-column
                    prop="cleanCost"
                    label="清洁费"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="maintainCost"
                    label="设备费"
                    width="180">
                </el-table-column>
                <el-table-column label="支付情况" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.status===1?'已支付':'未支付' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ownerId"
                    label="业主ID">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                    <el-button v-if="scope.row.status===0" type="primary" size="mini" icon="el-icon-edit" @click="open(scope.row)">支付</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            </div>
  </div>
  
</template>

<script>

import chargeApi from '@/api/pro/charge'
import url from '@/assets/二维码.png'
import memberApi from '@/api/member/member'

export default {
    data(){
        return {
            mobile:"",
            ownerId:"",
            proCharge:null,
            src: url
        }
        
    },
    created(){
        this.mobile=this.$route.query.name
        this.getOwner()
        
    },
    methods: {
        open(oneProCharge) {
            this.$alert("<strong><img src="+this.src+" width=350px height=350px>", '请扫描下方二维码进行支付：', {
                dangerouslyUseHTMLString: true
            }).then(() => {
            this.updateCharge(oneProCharge)
            this.$message({
                type: 'success',
                message: '支付成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消支付'
            });          
            });
        },
        updateCharge(oneProCharge){
            oneProCharge.status = 1
            chargeApi.updateChargeInfo(oneProCharge)
                .then(response => {
                })
        },
        getOwner(){
            memberApi.getOwnerByMobile(this.mobile)
                    .then(response => {
                        this.ownerId = response.data.ownerId
                        this.getChargeList(this.ownerId)
                    })
        },
        getChargeList(ownerId){
            memberApi.getCharge(ownerId)
                    .then(response => {
                        this.proCharge = response.data.proCharge
                        console.log(this.proCharge)
                    })
        }
    }
}


</script>


<style type="text/css">
.navbar {
    background-color: #ffffff;
    height: 100px;
    border-radius: 0px !important;
    position: relative;
}
.navbar h2{
    top:0;
    line-height: 60px;
    margin:0;
    left: 10%;
    font-size: 20px;
    color: rgb(0, 0, 0);
}
.navbar-menu{
    position: absolute;
    left: 0%;
    top: 150px;
    height: 100%;
    line-height: 80px;
    background: transparent;
    padding: 0;
    margin: 0;
}

.container-table {
    position: absolute;
    margin-right:0;margin-left:10%;
    
}
</style>